<template>
  <div style="padding: 10px;background-color: white;height: calc(100vh - 50px);">
    <tiny-tabs v-model="fl" @click="changeTab">
      <tiny-tab-item title="资产" name="资产">  </tiny-tab-item>
      <tiny-tab-item title="负债" name="负债">
      </tiny-tab-item>
      <tiny-tab-item title="权益" name="权益">  </tiny-tab-item>
    </tiny-tabs>
    <div style="padding-bottom: 10px;">
      <JButton type="info" @click="add">新增</JButton>
    </div>
    <tiny-split v-model="split1">
      <template #left>
        <div class="demo-split-pane">
          <TinyTree
            :data="treeList"
            :indent="indent"
            :show-line="true"
            default-expand-all
            @node-click="nodeClick"
          ></TinyTree>
        </div>
      </template>
      <template #right>
        <div class="demo-split-pane">
          <j-grid :columns="fields" v-model="detailList" :show-footer="false" @cellClick="cellClick"></j-grid>
        </div>
      </template>
    </tiny-split>
    <j-dialog v-model="show" :title="title" :z-index="99" width="500px">
      <div style="display: flex;" >
        <div style="width: 100px;">上级科目</div>
        <JAuto v-model="pidName" :list="editParentList" @change="changeParent"></JAuto>
      </div>
     <div style="display: flex;margin-top: 20px;">
       <div style="width: 100px;">科目名称</div>
       <JInput v-model="subjectName"></JInput>
     </div>
      <div style="display: flex;margin-top: 20px;">
        <div style="width: 100px;">科目备注</div>
        <JInput v-model="remark"></JInput>
      </div>
      <div style="text-align: center;margin-top: 20px;">
        <JButton type="info" size="small" @click="save">保存</JButton>
      </div>
    </j-dialog>
  </div>
</template>

<script>
// 会计科目
import tool from "@/utils/tool";
export default {
  props: {
    labelKey: {type: String, default: 'name'}
  },
  data() {
    return {
      fl: '资产',
      split1: '300px',
      treeList: [],
      detailList: [],
      indent: 18,
      fields: [
        {type: 'index', width: 60},
        {title: '所属分类', width: 100, field: 'pidName',align: 'left'},
        {title: '科目编码', width: 100, field: 'code',align: 'left'},
        {title: '科目名称', width: 100, field: 'name',align: 'left'},
        {title: '拼音码', width: 100, field: 'pinYin',align: 'left'},
        {title: '类型', width: 100, field: 'kmType',align: 'left'},
        {title: '备注', width: 100, field: 'remark',align: 'left'},
        {title: '状态', width: 100, field: 'state',},
        {title: '操作', width: 100,btns:[{
          label: '修改',show: 'row.isInit!==1',click: (row) => {
            this.edit(row)
            }
          }]}
      ],
      show: false,
      currentRow: '',
      editParentList: [],
      subjectName: '',
      remark: '',
      pidName: '',
      pid: ''
    }
  },
  computed: {
    title () {
      if(this.currentRow) {
        return `编辑【${this.fl}】类科目`
      }
      return `新增【${this.fl}】类科目`
    }
  },
  created() {
    this.getNodeList()
  },
  methods: {
    nodeClick (data, node, vm) {
      tool.post('subject/getNodeDetail', {id: data.id, fl: this.fl}).then(ret => {
        this.detailList = ret.data.list
      })
    },
    changeTab () {
      this.getNodeList()
      this.detailList = []
    },
    getNodeList () {
      tool.post('subject/getNode',{fl: this.fl}).then(ret => {
        if(ret.stat) {
          let label = '全部资产分类'
          if(this.fl === '负债') {
            label = '全部负债分类'
          }
          if(this.fl === '权益') {
            label = '全部权益分类'
          }
          let list = [
            {id: 0, label: label,children:[]}
          ]
          ret.data.list.map(row => {
            list[0].children.push(row)
          })
          list[0].children.push({
            id: -1,
            label: '未分类',
          })
          this.treeList = list
        }
      })
    },
    changeParent (val) {
      this.pid = val?val.id:''
    },
    add () {
      this.editParentList = []
      this.pid=''
      this.remark=''
      this.subjectName=''
      this.pidName=''
      this.currentRow=''
      tool.post('subject/getNode',{fl: this.fl}).then(ret => {
        this.editParentList = ret.data.list
      })
      this.show = true
    },
    save () {
      let model = {
        fl: this.fl,
        id: this.currentRow?this.currentRow.id:'',
        name: this.subjectName,
        remark: this.remark,
        pid: this.pid,
        pidName: this.pidName,
      }
      tool.post('subject/save', {formData: model}).then(ret => {
      })
    },
    edit (row) {
      this.currentRow = row
      this.pid = row.pid
      this.pidName = row.pidName
      this.remark = row.remark
      this.subjectName = row.name
      this.show = true
    },
    cellClick (row) {
      // tool.post('subject/stop', {id: row.row.id, state: row.row.state}).then(ret => {
      //   if(ret.state) {
      //     row.state = row.state === '启用' ? '停用':'启用'
      //   }
      // })
    }
  }
}
</script>